<template>
	<view>
		<u-navbar title="商品详情" autoBack placeholder :border="false"></u-navbar>
		<u-swiper @click="swiperClick" imgMode="scaleToFill"  height="240" :list="list3" indicator indicatorMode="line" indicatorStyle="right: 16rpx" circular @change="e => currentNum = e.current">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list3.length }}</text>
			</view>
		</u-swiper>
		<view class="good-detail-point">
			<u--image src="/static/image/home/bgc.jpg"
				width="100%" :fade="false" height="100rpx"></u--image>
			
			<view class="good-detail-point-l" v-if="detail.goodsType !== '4'">
				<text style="font-size: 36rpx;padding-right: 4rpx;">{{detail.goodsPrice || 0}}</text>
				<text style="font-size: 28rpx;">积分</text>
			</view>
			<view class="good-detail-point-l" v-else>
				<text style="font-size: 28rpx;">线下使用</text>
			</view>
			<view class="good-detail-point-r">
				<text>我的积分</text>
				<text style="font-weight: bold;">{{points}}</text>
			</view>
		</view>
		<view class="good-detail-title">{{detail.goodsName}}</view>
		<template v-if="detail.goodsType !== '4'">
			<view style="padding: 0 32rpx;background-color: #fff;margin-bottom: 16rpx;">
				<view class="good-detail-item u-border-bottom">
					<text style="color: #999;">规格</text>	
					<text style="color: #333;padding-left: 16rpx;">1 件</text>	
				</view>
				<view class="good-detail-item u-border-bottom">
					<text style="color: #999;">价格</text>	
					<text style="color: #333;padding-left: 16rpx;text-decoration: line-through;">&yen;{{detail.goodsAmount || 0}}</text>	
				</view>
				<view class="good-detail-item u-border-bottom">
					<text style="color: #999;">积分</text>	
					<text style="color: #333;padding-left: 16rpx;">消耗{{detail.goodsPrice || 0}}积分</text>	
				</view>
				<view class="good-detail-item">
					<text style="color: #999;">库存</text>	
					<text style="color: #333;padding-left: 16rpx;">{{detail.goodsSurplusNum || 0}}件</text>	
				</view>
			</view>	
		</template>
		<template v-else>
			<view style="padding: 0 32rpx;background-color: #fff;margin-bottom: 16rpx;">
				<view class="good-detail-item u-border-bottom">
					<text style="color: #999;">商家</text>	
					<text style="color: #333;padding-left: 16rpx;">{{detail.store}}</text>	
				</view>
				<view class="good-detail-item">
					<text style="color: #999;">位置</text>	
					<text style="color: #333;padding-left: 16rpx;">{{detail.address}}</text>	
				</view>
			</view>	
			<view style="padding: 16rpx 32rpx;background-color: #fff;color: #e1251b;">
				<view style="display: inline-block;"><u-icon color="#e1251b" name="volume"></u-icon></view>
				<text style="padding-right: 16rpx;padding-left: 4rpx;">重要提示: </text>	
				<text>{{detail.remark}}</text>	
			</view>
			<view style="height: 16rpx;"/>
		</template>
		<view style="padding: 16rpx 32rpx;background-color: #fff;">
			<view style="font-size: 36rpx;color: #000;padding-bottom: 16rpx;">商品详情</view>
			<u-parse :content="detail.detail || ''"></u-parse>
			<view style="height: 50px;"></view>
		</view>
		<view class="good-detail-bootom">
			<view style="margin: 0 32rpx;height: 100%;width: calc(100vw - 64rpx);display: flex;align-items: center;">
				<view class="good-detail-bootom-l1" @click="toHome">
					<u-icon name="home-fill" size="26"></u-icon>
					<text style="font-size: 24rpx; color: #666;">首页</text>
				</view>	
				<view class="good-detail-bootom-l">
					<view>
						<text style="font-size: 36rpx;padding-right: 4rpx;">{{points}}</text>
						<text style="font-size: 28rpx;">积分</text>
					</view>
					<text class="no-points" v-if="isExchange">*积分不足</text>	
					<text class="no-points1" v-else>*积分充足</text>	
				</view>
				<view class="good-detail-bootom-r">
					<u-button v-if="detail.goodsType !== '4'" @click="exchange" :disabled="isExchange" type="primary" :text="isExchange ? '无法兑换' : '立即兑换'" shape="circle"></u-button>
					<u-button v-else @click="toMap(detail.storeId)" type="primary" text="前往商家" shape="circle"></u-button>
				</view>
			</view>	
		</view>
		<u-modal @confirm="confirm" @cancel="cancel" confirmColor="#e1251b" showCancelButton cancelText="去看看" confirmText="继续兑换" :show="show" title="兑换结果">
			<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<u--image :src="list3[0]"
					width="120rpx" height="120rpx"></u--image>
				<view style="height: 32rpx;"/>
				<text>恭喜你, 商品兑换成功</text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {userQueryById, queryById, exchange} from '@/api/home.js';
	import {mapState, mapActions} from 'vuex';
	export default {
		data() {
			return {
				currentNum: 0,
				list3: [],
				detail: {},
				show: false
			}
		},
		computed: {
			...mapState(['userInfo']),
			points() {
				return this.userInfo.totalPoints || 0
			},
			isExchange() {
				return (this.userInfo.totalPoints || 0) < (this.detail.goodsPrice || 1)
			}
		},
		onLoad({id}) {
			this.$cuLoading().then(() => {
				queryById({id}).then(res => {
					const {goodsImage, detail} = res.result;
					this.detail = res.result;
					this.list3 = goodsImage.split(',');
				}).finally(() => {
					uni.hideLoading();
				})
			})
		},
		onShow() {
			let {id} = this.userInfo;
			if(id) {
				userQueryById({id}).then(res => {
					this.setUserInfo({userInfo: res.result})
				})
			}
		},
		methods: {
			...mapActions(['setUserInfo']),
			toMap(id) {
				this.$cuNavigateTo('/pages/me/shopAddress?id=' + id)
			},
			confirm() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			cancel() {
				uni.switchTab({
					url: '/pages/exchange/index'
				})
			},
			// 兑换
			exchange() {
				const that = this;
				const {isPerfect} = this.userInfo;
				if(isPerfect === '0') {
					return uni.showModal({
						title: '提示',
						content: `你还未完善资料, 前往完善资料？`,
						confirmColor: '#e1251b',
						success: function (res) {
							if (res.confirm) {
								that.$cuNavigateTo('/pages/register/index');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						},
						
					})
				}
				const {goodsName, id: goodsId, goodsPrice} = this.detail;
				uni.showModal({
					title: '提示',
					content: `兑换消耗${goodsPrice}积分, 确定兑换吗？`,
					confirmColor: '#e1251b',
					success: function (res) {
						if (res.confirm) {
							that.$cuLoading('兑换中...').then(() => {
								exchange({goodsId}).then(res => {
									uni.hideLoading();
									const {code, success, message} = res;
									// 兑换成功
									if(code === 200 && success) {
										that.show = true;
									} else {
										that.$cuTip(message);
									}
								})
							})
						}
					}
				})
			},
			swiperClick(index) {
				this.previewImg(index, this.list3)
			},
			// 预览图片
			previewImg(current, urls) {
				uni.previewImage({
					current,
					urls,
				});
			},
			toHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.good-detail-point {
		position: relative;
		height: 100rpx;
		.good-detail-point-l {
			position: absolute;
			color: #fff;
			font-weight: bold;
			left: 48rpx;
			top: 40%;
		}
		.good-detail-point-r {
			position: absolute;
			color: #ff9d4f;
			right: 48rpx;
			font-size: 26rpx;
			right: 28rpx;
			top: 20%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
	
	.good-detail-title {
		padding: 16rpx 32rpx;
		line-height: 48rpx;
		color: #000;
		margin-bottom: 16rpx;
		background-color: #fff;
	}
	
	.good-detail-item {
		height: 88rpx;
		display: flex;
		align-items: center;
	}
	
	.good-detail-bootom {
		background-color: #ffffff;
		position: fixed;
		height: 50px;
		width: 100vw;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);     /*兼容 iOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);  /*兼容 iOS>11.2*/
		box-sizing: content-box;
		.good-detail-bootom-l1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 72rpx;
		}
		.good-detail-bootom-l {
			margin-left: 120rpx;
			flex: 1;
			color: #000;
			display: flex;
			flex-direction: column;
			.no-points {
				color: $uni-color-error;
				font-size: 24rpx;
			}
			.no-points1 {
				color: $uni-color-success;
				font-size: 24rpx;
			}
		}
		.good-detail-bootom-r {
			flex: 2;
			text-align: right
		}
	}
	
	
	.indicator {
	        @include flex(row);
	        justify-content: center;
	
	        &__dot {
	             height: 6px;
	             width: 6px;
	             border-radius: 100px;
	             background-color: rgba(255, 255, 255, 0.35);
	             margin: 0 5px;
	             transition: background-color 0.3s;
	    
	            &--active {
	                 background-color: #ffffff;
	             }
	        }
	    }
	
	    .indicator-num {
	        padding: 2px 0;
	        background-color: rgba(0, 0, 0, 0.35);
	        border-radius: 100px;
	        width: 35px;
	        @include flex;
	        justify-content: center;
	
	        &__text {
	             color: #FFFFFF;
	             font-size: 12px;
	         }
	    }
</style>
